$(function () {

    //首页焦点图
    var swiperX = new Swiper('.swiper-container-Carousel', {
        effect: 'fade',
        lazy: {
            loadPrevNext: true
        },
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination-Carousel',
            clickable: true,
            renderBullet: function (index, className) {
                return '<span class="' + className + '"></span>';
            },
        },
        on: {
            init: function () {
                swiperAnimateCache(this); //隐藏动画元素
                swiperAnimate(this); //初始化完成开始动画
            },
            slideChangeTransitionEnd: function () {
                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            }
        }
    });
    // 首页关于我们
    $('.page-about .about-list ul li').hover(function () {
        $(this).find('p').css('color', '#fff')
        $(this).find('span').addClass('bgc1').removeClass('bgc2')
    }, function () {
        $(this).find('p').css('color', '#a0a0a0')
        $(this).find('span').removeClass('bgc1').addClass('bgc2')
    })

    // 导航条
    let navBar = $('.nav .nav-con .r div')
    let leftNum = 200;
    let timer;
    for (let i = 0; i < navBar.length; i++) {
        navBar.eq(i).hover(function () {
            console.log(navBar.eq(i));
            console.log($('.nav-line'))
            Array.from(navBar).forEach(element => {
                $(element).removeClass('active')
            });
            clearTimeout(timer)
            $('.nav-line').animate({
                left: leftNum * i + 'px'
            })
        }, function () {
            timer = setTimeout(function () {
                $('.nav-line').animate({
                    left: 0
                })
                // navBar.eq(0).addClass('active')
            }, 1500)
        })

    }

    //菜品介绍
    var swiperP = new Swiper('.swiper-container-dish', {
        lazy: {
            loadPrevNext: true
        },
        slidesPerView: 4,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    });
    $('.swiper-container-dish .swiper-wrapper').on('mouseover', '.swiper-slide', function () {
        $(this).find('img').css({
            transform: 'translateY(-30%)'
        })
        $(this).find('.dish_des').css({
            bottom: '0'
        })

    })
    $('.swiper-container-dish .swiper-wrapper').on('mouseout', '.swiper-slide', function () {
        $(this).find('img').css({
            transform: 'translateY(0)'
        })
        $(this).find('.dish_des').css({
            bottom: '-31%'
        })
    })
    // 门店
    var swiperP = new Swiper('.swiper-container-picture', {
        lazy: {
            loadPrevNext: true
        },
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        initialSlide: 1,
        autoplay: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        on: {
            progress: function (progress) {
                for (i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i);
                    var slideProgress = this.slides[i].progress;
                    modify = 1;
                    if (Math.abs(slideProgress) > 1) {
                        modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                    }
                    translate = slideProgress * modify * 260 + 'px';
                    scale = 1 - Math.abs(slideProgress) / 5;
                    zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                    slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                    slide.css('zIndex', zIndex);
                    slide.css('opacity', 1);
                    if (Math.abs(slideProgress) > 3) {
                        slide.css('opacity', 0);
                    }
                }
            },
            setTransition: function (transition) {
                for (var i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i)
                    slide.transition(transition);
                }

            }
        }
    });

    

    // 新闻资讯
    $('.page-news li').hover(function () {
        $(this).css({
            background: '#e2e2e2',
            cursor: 'pointer'
        })
        $(this).find('p').eq(0).css("color", "#c8161d")
    }, function () {
        $(this).css({
            background: 'transparent',
        })
        $(this).find('p').eq(0).css("color", "#000")
    })

    $('.cu-container input').on("focus", function () {
        $(this).parent().addClass('active')
    })
    $('.cu-container input').on("blur", function () {
        $(this).parent().removeClass('active')
    })
    $('.cu-container textarea').on("focus", function () {
        $(this).addClass('active')
    })
    $('.cu-container textarea').on("blur", function () {
        $(this).removeClass('active')
    })
    // 菜品展示
    $('.ds-container li').hover(function () {
        $(this).children('div').css('height', "36%")
    }, function () {
        $(this).children('div').css('height', 0)
    })
    // 新闻资讯
    $('.nf-list li').hover(function () {
        $(this).css({
            background: '#e2e2e2',
            cursor: 'pointer'
        })
        $(this).find('p').eq(0).css("color", "#c8161d")
        $(this).find('.l-r div').addClass('r-bg01').removeClass('r-bg')
    }, function () {
        $(this).css({
            background: 'transparent',
        })
        $(this).find('p').eq(0).css("color", "#000")
        $(this).find('.l-r div').addClass('r-bg').removeClass('r-bg01')
    })


    function loadimg(dom) {
        $("." + dom).lazyload({
            //container: $('.list'),			// 对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认加载所有图片）
            threshold: 100, //当图片顶部距离显示区域还有100像素时，就开始加载
            placeholder: "", // 图片未加载时，占位
            effect: "fadeIn", // 图片出现的效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉)
            effect_speed: 1000, // 效果出现的时间
            event: 'scroll', // 滚动滚轮时触发，可以是：click、mouseover等
            data_attribute: 'original', // img标签中保存url的自定义属性，默认：data-original
            skip_invisible: true, // 是否跳过已经隐藏的图片（display:none）
            failure_limit: 2, // 由于延迟加载是根据Dom从上到下执行
            appear: function () { // 当图片位置刚出现在视图时，触发此事件
                $(this).attr('src');
            },
            load: function () { // 当图片路径加载之后，触发此事件
                $(this).attr('src');
            }
        });
    }
    loadimg("lazy");
    var bannerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    $(".swiper-container-Carousel").css("height", bannerHeight + "px");

})